<template>
  <div class="filterField">
    <div class="filterField_title">筛选字段列表</div>
    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="filter_Table"
      :pagination="false"
      rowKey="name"
      size="middle"
    >
      <span slot="action" slot-scope="row" v-if="row.name !== 'start' && row.name !== 'end'">
        <a @click="onUpdateFilter(row)">编辑</a>
      </span>
      <span slot="type" slot-scope="row">
        <div class="yuan_div">
          <span :class="row == 'select' ? 'yuan_dian' : 'lan_se'"></span>{{row == 'input'? '输入' : '选择' }}
        </div>
      </span>
    </a-table>
    <a-modal v-model="visible" :title="title" @ok="handleOk" @cancel="hanleCancel" okText="确定" cancelText="取消" :maskClosable="false">
      <!-- 表单 -->
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <!-- 筛选字段 -->
        <a-form-model-item ref="name" label="筛选字段">
          <div>{{ form.name }}</div>
           <!-- <a-input v-model="form.name" placeholder="请输入筛选字段" disabled /> -->
        </a-form-model-item>
        <!-- 显示名 -->
        <a-form-model-item ref="displayName" label="显示名" prop="displayName">
          <a-input v-model="form.displayName" placeholder="请输入显示名"/>
        </a-form-model-item>
        <!-- 数据类型 -->
        <a-form-model-item ref="dataType" label="数据类型" prop="dataType">
          <a-select v-model="form.dataType" placeholder="请选择" disabled>
            <a-select-option value="string">
              字符串
            </a-select-option>
            <a-select-option value="number">
              数字
            </a-select-option>
            <a-select-option value="boolean">
              布尔值
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 类型 -->
        <a-form-model-item ref="type" label="类型" prop="type">
          <a-select v-model="form.type" placeholder="请选择">
            <a-select-option value="select">
              选择
            </a-select-option>
            <a-select-option value="input">
              输入
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 可选项来源 -->
        <a-form-model-item v-if="form.type == 'select'" ref="optionType" label="可选项来源" prop="optionType">
          <a-select v-model="form.optionType" placeholder="请选择" >
            <a-select-option value="sql">
              sql
            </a-select-option>
            <a-select-option value="dict">
              字典
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 字典列表 -->
        <a-form-model-item
          v-if="form.type == 'select' && ['dict', '字典'].includes(form.optionType) || form.type == 'select' && form.optionType =='sql' "
          :label="form.optionType == 'sql' ? 'sql查询' :'字典列表'"
          prop="options"
        >
          <a-input v-if="['dict', '字典'].includes(form.optionType)" v-model="form.options" type="textarea" placeholder="请输入" />
          <a-input v-if="form.optionType =='sql'" v-model="form.options" type="textarea" placeholder="请输入sql语句" />
          <a-alert v-if="['dict', '字典'].includes(form.optionType)" message="字典项格式为'key,value'，字典项之间以换行分隔。" type="info" />
          <a-alert v-if="form.optionType =='sql'" message="sql语句的返回结果必须包含value和displayName两列，其中value对应可选项的值，displayName对应可选项的显示名。" type="info" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
  const columns = [
    {
      title: '字段名',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '字段显示名',
      dataIndex: 'displayName',
      align: 'center'
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      align: 'center',
      scopedSlots: { customRender: 'type' },
    },
    {
      title: '可选项来源',
      dataIndex: 'optionType',
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      scopedSlots: { customRender: 'action' },
    }
  ]
  export default {
    data() {
      return {
        columns,
        visible: false,
        title: '编辑筛选字段',
        form :{},
        rules: {
            displayName: [
              { required: true, message: '请输入显示名', trigger: 'blur' },
              { max: 100, message: '最大长度为100个字符', trigger: 'blur' }
            ],
            dataType: [
              { required: true, message: '请选择数据类型', trigger: 'change' }
            ],
            type: [
              { required: true, message: '请选择类型', trigger: 'change' }
            ]
        },
        filterList: [
        ],
        properties: [],
        oldForm: {}
      }
    },
    watch: {
      form: {
        handler (val) {
          if (val.name) {
            this.properties.forEach(v=> {
              v.name == val.name && (this.form.displayName = v.displayName)
            })
          }
        },
        deep: true
      },
      filterList: {
        handler (val) {
          this.queryForm.filter = JSON.parse(JSON.stringify(val))
        },
        deep: true
      },
      visible (val) {
        if (!val) {
          this.form = {}
          this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
        }
      },
      filterColumns:{
        handler(val){
          this.initFilter()
        },
        deep:true
      }
    },
    props: ['queryForm'],
    computed: {
      ...mapState('sql_query', ['filterColumns']),
      filter_Table () {
        return this.filterList.map(item =>{
          let optionType = null,
              dataType = null;
          switch (item.optionType) {
            case 'dict':
              optionType = '字典';
              break;
            case 'sql':
              optionType = 'sql';
              break;
            default:
              optionType = '无';
              break;
          }
          switch (item.dataType) {
            case 'number':
              dataType = '数字';
              break;
            case 'string':
              dataType = '字符串';
              break;
            case 'boolean':
              dataType = '布尔值';
              break;
          }
          return {...item, optionType, dataType}
        })
      }
    },
    methods: {
      ...mapMutations('analyseType', ['SET_FILTERFORM']),
      onUpdateFilter (row) {
        let optionType = null,
            dataType = null;
        switch (row.optionType) {
            case 'dict':
              optionType = 'dict';
              break;
            case 'sql':
              optionType = 'sql';
              break;
            case '字典':
              optionType = 'dict';
              break;
            case 'sql':
              optionType = 'sql';
              break;
            default:
              optionType = '无';
              break;
          }
          switch (row.dataType) {
            case 'number':
              dataType = 'number';
              break;
            case 'string':
              dataType = 'string';
              break;
            case 'boolean':
              dataType = 'boolean';
              break;
            case '数字':
              dataType = 'number';
              break;
            case '字符串':
              dataType = 'string';
              break;
            case '布尔值':
              dataType = 'boolean';
              break;
          }
        this.visible = true
        this.title = '编辑筛选字段'
        this.form = { ...row, optionType, dataType }
        this.oldForm = {...row, optionType, dataType }
      },
      hanleCancel () {},
      handleOk () {
        if (this.form.type == 'input') {
          this.form.optionType = '无'
          this.form.options = '无'
        }
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.filterList.forEach((v, i) => {
              v.name == this.oldForm.name && this.filterList.splice( i, 1, {...this.form} )
            })
            this.visible = false
            this.form = {}
          } else {
            return false;
          }
        });
      },
      initFilter () {
        let filters = [];
        if (this.queryForm.filter && this.queryForm.filter.length > 0){
          filters = this.queryForm.filter
        }else {
          let vuex_columns = [...this.filterColumns]
          let filter_queryForm = this.queryForm.filter
          vuex_columns.forEach(column => {
            let index = filter_queryForm.findIndex((value) => {
              return value.name === column.name;
            })
            if (index > -1) {
              filters.push(filter_queryForm[index])
            } else{
              filters.push(column)
            }
          })
        }
        this.filterList = filters;
      }
    },
    mounted() {
      this.initFilter()
    },
  }
</script>

<style scoped>
.filterField>.ant-table-wrapper>>>.ant-spin-nested-loading {
  margin-top: 20px;
}

.filterField_title {
  font-size: 16px;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  line-height: 32px;
  margin-top: 10px;
}

.yuan_dian {
  width: 5px;
  height: 5px;
  display: inline-block;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 4px;
}

.lan_se {
  width: 5px;
  height: 5px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #1890ff;
}

.yuan_div {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
